import { StackNavigator, TabNavigator } from 'react-navigation';
import React, { Component } from 'react';
import { PixelRatio, Dimensions, Platform, StyleSheet, Text, View, Image, Button, ScrollView, TouchableHighlight, TextInput } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;

class PersonalScreen extends React.Component {
    static navigationOptions = {
        header:null,
        tabBarLabel: '我的',
        tabBarIcon: ({tintColor}) => (<Image source={require('./../res/icon/personal-icon.png')}
            style={{
                tintColor: tintColor
            }}/>),
    };
    render() {
        const {navigate} = this.props.navigation;
        return (
		<View style={{flex: 1, flexDirection: 'column'}}>
		  <View style={{backgroundColor:'white',height:45,flexDirection: 'row'}}>
		    <View style={{flex:1}}/>
		    <View style={{flex:5,alignItems:'center',justifyContent: 'center'}}>
			  <Text style={{fontWeight: 'normal',color: '#2196F7',alignSelf: 'center',fontSize:19}}>个人中心</Text>
			</View>
		    <View style={{flex:1,alignItems:'flex-end',justifyContent: 'center'}}>
			  <TouchableHighlight underlayColor="#eee" onPress={() => navigate('SetUp')}>
			    <Image source={require('./../res/icon/set-icon.png')} style={{
				  margin: 10,
                  width: 30,
                  height: 30
                }}/>
			  </TouchableHighlight>
			</View>
		  </View>
		  <View style={{height: 1/PixelRatio.get(), backgroundColor:'#c4c4c4'}}/>
          <ScrollView>
	        <View style={styles.first}>
              <Image source={require('./../res/portrait/img1.jpg')} style={styles.img}/>
		      <View style={styles.idArea}>
		        <Text style={styles.idName}>爸爸疼你</Text>
		      </View>
		    </View>
			<View style={{height:30, flexDirection:'row'}}>
			  <View style={{height:40, flex:9}}/>
			  <View style={{backgroundColor:'#2196F7',flex:2,borderRadius:5}}>
			    <TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={() => navigate('Report')}>
				  <View style={{justifyContent:'center',alignItems:'center',marginTop:3}}>
			        <Text style={{fontSize:16,color:'white'}}>周报</Text>
				  </View>
				</TouchableHighlight>
			  </View>
			  <View style={{flex:1}}/>
			</View>
			<View style={{height:10}}/>
		    <TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={() => navigate('MyMoment')}>
		      <View style={styles.second}>
		        <Text style={styles.idName}>我的动态</Text>
		      </View>
		    </TouchableHighlight>
		    <TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={() => this.update()}>
		      <View style={styles.third}>
		        <Text style={styles.idName}>版本更新</Text>
		      </View>
		    </TouchableHighlight>
			<TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={() => this.comment()}>
		      <View style={styles.third}>
		        <Text style={styles.idName}>意见反馈</Text>
		      </View>
		    </TouchableHighlight>
			<TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={() => this.logout()}>
		      <View style={styles.forth}>
		        <Text style={styles.idLogOut}>退出登录</Text>
		      </View>
		    </TouchableHighlight>
          </ScrollView>
	    </View>
        );
    }

    update() {};
	comment() {};
	logout() {};
}

const styles = StyleSheet.create({
    first: {
        flexDirection: 'row',
        height: 200,
    },
    img: {
        width: 150,
        height: 150,
        marginTop: 20,
        marginLeft: 20,
        backgroundColor: 'white',
        borderRadius: 150,
        justifyContent: 'center',
        alignItems: 'center',
        resizeMode:'contain',
    },
    addImg: {
        fontSize: 50,
        color: 'black',
    },
    idArea: {
        width: ScreenWidth - 170,
        height: 150,
        marginLeft: 80,
        marginTop: 20,
        justifyContent: 'center',
    },
    idName: {
        fontSize: 20,
        color: 'black',
    },
	idLogOut: {
        fontSize: 20,
        color: 'white',
    },
    second: {
        flexDirection: 'row',
        height: 85,
        backgroundColor: 'white',
        marginTop: 10,
        justifyContent: 'center',
        alignItems: 'center',
    },
    third: {
        flexDirection: 'row',
        height: 85,
        backgroundColor: 'white',
        marginTop: 15,
        justifyContent: 'center',
        alignItems: 'center',
    },
	forth: {
        flexDirection: 'row',
        height: 85,
        backgroundColor: '#FF3030',
        marginTop: 15,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default PersonalScreen;
